<template>
  <view class="drone-order-center">
    <!-- 顶部导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">无人机订单中心</view>
      <view class="nav-search" @click="showSearch">
        <text class="search-icon">🔍</text>
      </view>
    </view>

    <!-- 订单类型筛选 -->
    <view class="order-type-tabs">
      <view 
        class="type-tab" 
        :class="{ active: orderType === 'all' }"
        @click="orderType = 'all'"
      >
        全部订单
      </view>
      <view 
        class="type-tab" 
        :class="{ active: orderType === 'new' }"
        @click="orderType = 'new'"
      >
        新品订单
      </view>
      <view 
        class="type-tab" 
        :class="{ active: orderType === 'used' }"
        @click="orderType = 'used'"
      >
        二手订单
      </view>
    </view>

    <!-- 订单状态筛选 -->
    <view class="status-filter">
      <scroll-view scroll-x class="status-scroll">
        <view class="status-container">
          <view 
            class="status-item" 
            :class="{ active: activeStatus === 'all' }"
            @click="activeStatus = 'all'"
          >
            全部状态
          </view>
          <view 
            class="status-item" 
            :class="{ active: activeStatus === 'pending_pay' }"
            @click="activeStatus = 'pending_pay'"
          >
            待付款
          </view>
          <view 
            class="status-item" 
            :class="{ active: activeStatus === 'pending_ship' }"
            @click="activeStatus = 'pending_ship'"
          >
            待发货
          </view>
          <view 
            class="status-item" 
            :class="{ active: activeStatus === 'shipping' }"
            @click="activeStatus = 'shipping'"
          >
            配送中
          </view>
          <view 
            class="status-item" 
            :class="{ active: activeStatus === 'pending_verify' }"
            @click="activeStatus = 'pending_verify'"
          >
            待验机<span class="tag-new">新</span>
          </view>
          <view 
            class="status-item" 
            :class="{ active: activeStatus === 'completed' }"
            @click="activeStatus = 'completed'"
          >
            已完成
          </view>
          <view 
            class="status-item" 
            :class="{ active: activeStatus === 'cancelled' }"
            @click="activeStatus = 'cancelled'"
          >
            已取消
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 订单列表 -->
    <scroll-view class="order-scroll" scroll-y>
      <view class="order-list">
        <view 
          class="order-card" 
          v-for="(order, index) in filteredOrders" 
          :key="index"
        >
          <!-- 订单头部信息 -->
          <view class="order-header">
            <view class="order-basic">
              <view class="order-no">
                <text class="label">订单编号：</text>
                <text class="value">{{ order.orderNo }}</text>
              </view>
              <view class="order-date">{{ order.createTime }}</view>
            </view>
            <view class="order-tag" v-if="order.type === 'new'">
              新品
            </view>
            <view class="order-tag used-tag" v-if="order.type === 'used'">
              二手{{ order.condition }}
            </view>
          </view>

          <!-- 商品信息 -->
          <view class="product-info" @click="viewDetail(order)">
            <view class="product-image">
              <image :src="order.product.image" mode="widthFix" class="drone-img"></image>
            </view>
            <view class="product-details">
              <view class="product-name">{{ order.product.name }}</view>
              <view class="product-spec">
                <text>型号：{{ order.product.model }}</text>
                <text class="separator">|</text>
                <text>颜色：{{ order.product.color }}</text>
              </view>
              <view class="product-accessories" v-if="order.product.accessories.length > 0">
                <text class="accessory-label">包含配件：</text>
                <text class="accessory-list">{{ order.product.accessories.join('、') }}</text>
              </view>
              <view class="product-warranty" v-if="order.type === 'new'">
                <text class="warranty-icon">🛡️</text>
                <text class="warranty-text">官方保修 {{ order.warranty }} 年</text>
              </view>
              <view class="product-warranty" v-if="order.type === 'used'">
                <text class="warranty-icon">🛡️</text>
                <text class="warranty-text">验机合格 · 质保 {{ order.warranty }} 个月</text>
              </view>
            </view>
            <view class="product-price">
              <text class="price-text">¥{{ order.product.price }}</text>
              <text class="quantity">×{{ order.quantity }}</text>
            </view>
          </view>

          <!-- 订单状态与进度 -->
          <view class="order-status">
            <view class="status-text" :class="getStatusClass(order.status)">
              {{ getStatusText(order.status) }}
            </view>
            <view class="status-progress" v-if="order.status !== 'cancelled'">
              <view class="progress-bar">
                <view 
                  class="progress-fill" 
                  :style="{ width: getProgressWidth(order.status) }"
                ></view>
              </view>
              <view class="progress-steps">
                <view class="step" :class="{ completed: isStepCompleted(order.status, 'paid') }">
                  <view class="step-dot"></view>
                  <view class="step-text">付款</view>
                </view>
                <view class="step" :class="{ completed: isStepCompleted(order.status, 'shipped') }">
                  <view class="step-dot"></view>
                  <view class="step-text">发货</view>
                </view>
                <view class="step" :class="{ completed: isStepCompleted(order.status, 'received') }">
                  <view class="step-dot"></view>
                  <view class="step-text">收货</view>
                </view>
                <view 
                  class="step" 
                  :class="{ completed: isStepCompleted(order.status, 'verified') }"
                  v-if="order.type === 'used'"
                >
                  <view class="step-dot"></view>
                  <view class="step-text">验机</view>
                </view>
                <view class="step" :class="{ completed: isStepCompleted(order.status, 'completed') }">
                  <view class="step-dot"></view>
                  <view class="step-text">完成</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 订单金额 -->
          <view class="order-amount">
            <view class="amount-label">实付款：</view>
            <view class="amount-value">¥{{ order.totalAmount }}</view>
          </view>

          <!-- 操作按钮 -->
          <view class="order-actions">
            <button 
              class="action-btn secondary-btn" 
              v-if="canCancelOrder(order.status)"
              @click.stop="cancelOrder(order)"
            >
              取消订单
            </button>
            <button 
              class="action-btn primary-btn" 
              v-if="canPayOrder(order.status)"
              @click.stop="payOrder(order)"
            >
              立即付款
            </button>
            <button 
              class="action-btn primary-btn" 
              v-if="canReceiveOrder(order.status)"
              @click.stop="receiveOrder(order)"
            >
              确认收货
            </button>
            <button 
              class="action-btn primary-btn" 
              v-if="canVerifyOrder(order.status, order.type)"
              @click.stop="verifyOrder(order)"
            >
              确认验机
            </button>
            <button 
              class="action-btn text-btn" 
              v-if="canViewDetail(order.status)"
              @click.stop="viewDetail(order)"
            >
              查看详情
            </button>
            <button 
              class="action-btn text-btn" 
              v-if="canComment(order.status)"
              @click.stop="gotoComment(order)"
            >
              评价商品
            </button>
            <button 
              class="action-btn text-btn" 
              v-if="canWarranty(order.status)"
              @click.stop="viewWarranty(order)"
            >
              保修服务
            </button>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="filteredOrders.length === 0">
          <view class="empty-icon">🚁</view>
          <view class="empty-text">暂无相关订单</view>
          <view class="empty-desc">
            {{ getEmptyDesc() }}
          </view>
          <button class="shop-btn" @click="gotoShop">
            去选购无人机
          </button>
        </view>
      </view>
    </scroll-view>

    <!-- 搜索弹窗 -->
    <view class="search-modal" v-if="isSearchVisible">
      <view class="modal-mask" @click="hideSearch"></view>
      <view class="search-content" style="padding-top: 120rpx;">
        <view class="search-box">
          <text class="search-icon">🔍</text>
          <input 
            class="search-input"
            placeholder="搜索订单号、无人机型号"
            v-model="searchKeyword"
            @confirm="doSearch"
          ></input>
          <text class="cancel-icon" @click="hideSearch">取消</text>
        </view>
        <view class="search-history" v-if="searchHistory.length > 0">
          <view class="history-title">搜索历史</view>
          <view class="history-tags">
            <view 
              class="history-tag" 
              v-for="(item, index) in searchHistory" 
              :key="index"
              @click="searchWithHistory(item)"
            >
              {{ item }}
              <text class="delete-history" @click.stop="deleteHistory(index)">×</text>
            </view>
          </view>
          <view class="clear-history" @click="clearHistory">
            清除历史记录
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单类型筛选：all/new/used
      orderType: 'all',
      // 订单状态筛选
      activeStatus: 'all',
      // 搜索相关
      isSearchVisible: false,
      searchKeyword: '',
      searchHistory: ['Mavic 3', 'ORD20231020', 'Air 2S'],
      
      // 订单数据
      orders: [
        {
          id: 1,
          orderNo: 'DRONE20231020001',
          type: 'new', // 新品
          createTime: '2023-10-20 14:30',
          status: 'pending_pay',
          quantity: 1,
          totalAmount: 7888,
          warranty: 2,
          product: {
            image: 'https://st2.depositphotos.com/1027670/5802/i/450/depositphotos_58028431-stock-photo-flying-drone-in-the-skies.jpg',
            name: 'DJI Mavic 3 畅飞套装',
            model: 'Mavic 3',
            color: '深空灰',
            price: 7888,
            accessories: ['智能飞行电池', '遥控器', '备用螺旋桨', '云台保护罩']
          }
        },
        {
          id: 2,
          orderNo: 'DRONE20231019042',
          type: 'used', // 二手
          condition: '95新',
          createTime: '2023-10-19 09:15',
          status: 'shipping',
          quantity: 1,
          totalAmount: 4299,
          warranty: 6,
          product: {
            image: 'https://st2.depositphotos.com/1027670/5802/i/450/depositphotos_58028431-stock-photo-flying-drone-in-the-skies.jpg',
            name: 'DJI Air 2S 单机',
            model: 'Air 2S',
            color: '白色',
            price: 4299,
            accessories: ['智能飞行电池', '遥控器']
          }
        },
        {
          id: 3,
          orderNo: 'DRONE20231018036',
          type: 'used',
          condition: '9成新',
          createTime: '2023-10-18 16:40',
          status: 'pending_verify',
          quantity: 1,
          totalAmount: 2899,
          warranty: 6,
          product: {
            image: 'https://st2.depositphotos.com/1027670/5802/i/450/depositphotos_58028431-stock-photo-flying-drone-in-the-skies.jpg',
            name: 'DJI Mini 2 便携套装',
            model: 'Mini 2',
            color: '白色',
            price: 2899,
            accessories: ['智能飞行电池×2', '遥控器', '便携收纳包']
          }
        },
        {
          id: 4,
          orderNo: 'DRONE20231015012',
          type: 'new',
          createTime: '2023-10-15 11:20',
          status: 'completed',
          quantity: 1,
          totalAmount: 5499,
          warranty: 2,
          product: {
            image: 'https://st2.depositphotos.com/1027670/5802/i/450/depositphotos_58028431-stock-photo-flying-drone-in-the-skies.jpg',
            name: 'DJI FPV 数字图传套装',
            model: 'FPV',
            color: '黑色',
            price: 5499,
            accessories: ['飞行眼镜', '遥控器', '智能飞行电池']
          }
        }
      ]
    };
  },
  
  computed: {
    // 筛选后的订单
    filteredOrders() {
      let result = [...this.orders];
      
      // 订单类型筛选
      if (this.orderType !== 'all') {
        result = result.filter(order => order.type === this.orderType);
      }
      
      // 订单状态筛选
      if (this.activeStatus !== 'all') {
        result = result.filter(order => order.status === this.activeStatus);
      }
      
      // 搜索筛选
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        result = result.filter(order => {
          return order.orderNo.toLowerCase().includes(keyword) || 
                 order.product.name.toLowerCase().includes(keyword) ||
                 order.product.model.toLowerCase().includes(keyword);
        });
      }
      
      return result;
    }
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 显示搜索
    showSearch() {
      this.isSearchVisible = true;
    },
    
    // 隐藏搜索
    hideSearch() {
      this.isSearchVisible = false;
    },
    
    // 执行搜索
    doSearch() {
      if (this.searchKeyword && !this.searchHistory.includes(this.searchKeyword)) {
        if (this.searchHistory.length >= 8) {
          this.searchHistory.pop();
        }
        this.searchHistory.unshift(this.searchKeyword);
      }
      this.hideSearch();
    },
    
    // 使用历史记录搜索
    searchWithHistory(keyword) {
      this.searchKeyword = keyword;
      this.hideSearch();
    },
    
    // 删除历史记录
    deleteHistory(index) {
      this.searchHistory.splice(index, 1);
    },
    
    // 清除所有历史记录
    clearHistory() {
      this.searchHistory = [];
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending_pay': '待付款',
        'pending_ship': '待发货',
        'shipping': '配送中',
        'pending_verify': '待验机',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const classMap = {
        'pending_pay': 'status-pending-pay',
        'pending_ship': 'status-pending-ship',
        'shipping': 'status-shipping',
        'pending_verify': 'status-pending-verify',
        'completed': 'status-completed',
        'cancelled': 'status-cancelled'
      };
      return classMap[status] || '';
    },
    
    // 获取进度条宽度
    getProgressWidth(status) {
      const progressMap = {
        'pending_pay': '0%',
        'pending_ship': '25%',
        'shipping': '50%',
        'pending_verify': '75%',
        'completed': '100%',
        'cancelled': '0%'
      };
      return progressMap[status] || '0%';
    },
    
    // 判断步骤是否完成
    isStepCompleted(currentStatus, targetStep) {
      const statusOrder = [
        'pending_pay', 
        'pending_ship', 
        'shipping', 
        'pending_verify', 
        'completed'
      ];
      const stepMap = {
        'paid': 'pending_ship',
        'shipped': 'shipping',
        'received': 'pending_verify',
        'verified': 'completed',
        'completed': 'completed'
      };
      
      const currentIndex = statusOrder.indexOf(currentStatus);
      const targetIndex = statusOrder.indexOf(stepMap[targetStep]);
      
      return currentIndex >= targetIndex && currentStatus !== 'cancelled';
    },
    
    // 订单操作权限判断
    canCancelOrder(status) {
      return ['pending_pay', 'pending_ship'].includes(status);
    },
    
    canPayOrder(status) {
      return status === 'pending_pay';
    },
    
    canReceiveOrder(status) {
      return status === 'shipping';
    },
    
    canVerifyOrder(status, type) {
      return status === 'pending_verify' && type === 'used';
    },
    
    canViewDetail(status) {
      return ['completed', 'cancelled', 'pending_verify'].includes(status);
    },
    
    canComment(status) {
      return status === 'completed';
    },
    
    canWarranty(status) {
      return status === 'completed';
    },
    
    // 订单操作
    cancelOrder(order) {
      uni.showModal({
        title: '取消订单',
        content: '确定要取消此订单吗？',
        success: (res) => {
          if (res.confirm) {
            const index = this.orders.findIndex(item => item.id === order.id);
            if (index !== -1) {
              this.orders[index].status = 'cancelled';
              uni.showToast({ title: '订单已取消', icon: 'success' });
            }
          }
        }
      });
    },
    
    payOrder(order) {
      // 模拟支付流程
      uni.showLoading({ title: '支付处理中...' });
      setTimeout(() => {
        uni.hideLoading();
        const index = this.orders.findIndex(item => item.id === order.id);
        if (index !== -1) {
          this.orders[index].status = 'pending_ship';
          uni.showToast({ title: '支付成功', icon: 'success' });
        }
      }, 1500);
    },
    
    receiveOrder(order) {
      uni.showModal({
        title: '确认收货',
        content: '请确认已收到无人机商品',
        success: (res) => {
          if (res.confirm) {
            const index = this.orders.findIndex(item => item.id === order.id);
            if (index !== -1) {
              // 二手商品收货后进入验机环节
              this.orders[index].status = order.type === 'used' ? 'pending_verify' : 'completed';
              uni.showToast({ title: '确认收货成功', icon: 'success' });
            }
          }
        }
      });
    },
    
    verifyOrder(order) {
      uni.showModal({
        title: '确认验机',
        content: '请确认二手无人机验机无误',
        success: (res) => {
          if (res.confirm) {
            const index = this.orders.findIndex(item => item.id === order.id);
            if (index !== -1) {
              this.orders[index].status = 'completed';
              uni.showToast({ title: '验机确认成功', icon: 'success' });
            }
          }
        }
      });
    },
    
    // 导航跳转
    viewDetail(order) {
      uni.navigateTo({
        url: `/pages/drone/order-detail?id=${order.id}`
      });
    },
    
    gotoComment(order) {
      uni.navigateTo({
        url: `/pages/drone/order-comment?id=${order.id}`
      });
    },
    
    viewWarranty(order) {
      uni.navigateTo({
        url: `/pages/drone/warranty?id=${order.id}`
      });
    },
    
    gotoShop() {
      uni.navigateTo({
        url: '/pages/drone/shop'
      });
    },
    
    // 获取空状态描述
    getEmptyDesc() {
      if (this.orderType === 'new' && this.activeStatus === 'all') {
        return '您暂无无人机新品订单，去看看最新款无人机吧';
      } else if (this.orderType === 'used' && this.activeStatus === 'all') {
        return '您暂无二手无人机订单，高性价比二手无人机等你来选';
      } else if (this.activeStatus !== 'all') {
        return `您暂无${this.getStatusText(this.activeStatus)}的无人机订单`;
      }
      return '您暂无任何无人机订单，去选购心仪的无人机吧';
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$success: #00B42A;
$warning: #FF7D00;
$danger: #FF4D4F;
$pending: #FF9A2E;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg: #F5F7FA;
$card: #FFFFFF;
$border: #E5E6EB;
$shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.drone-order-center {
  background-color: $bg;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 自定义导航栏
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card;
  box-shadow: $shadow;
  
  .nav-back, .nav-search {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: $bg;
    }
  }
  
  .back-icon, .search-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 订单类型筛选
.order-type-tabs {
  display: flex;
  height: 90rpx;
  background-color: $card;
  border-bottom: 1px solid $border;
  
  .type-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: $text-secondary;
    position: relative;
    
    &.active {
      color: $primary;
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6rpx;
        background-color: $primary;
        border-radius: 3rpx 3rpx 0 0;
      }
    }
    
    &:active {
      background-color: $bg;
    }
  }
}

// 状态筛选
.status-filter {
  height: 80rpx;
  background-color: $card;
  border-bottom: 1px solid $border;
  
  .status-scroll {
    width: 100%;
    height: 100%;
  }
  
  .status-container {
    display: flex;
    height: 100%;
    padding: 0 20rpx;
  }
  
  .status-item {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    margin-right: 10rpx;
    font-size: 26rpx;
    color: $text-secondary;
    white-space: nowrap;
    
    .tag-new {
      font-size: 20rpx;
      color: $danger;
      margin-left: 6rpx;
      background-color: rgba(255, 77, 79, 0.1);
      padding: 2rpx 8rpx;
      border-radius: 10rpx;
    }
    
    &.active {
      color: $primary;
      font-weight: 500;
      background-color: $primary-light;
      border-radius: 40rpx;
    }
    
    &:active {
      background-color: $primary-light;
    }
  }
}

// 滚动区域
.order-scroll {
  width: 100%;
  height: calc(100vh - var(--status-bar-height) - 90rpx - 90rpx - 80rpx);
}

// 订单列表
.order-list {
  padding: 20rpx;
}

// 订单卡片
.order-card {
  background-color: $card;
  border-radius: 18rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: $shadow;
  transition: transform 0.2s;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  }
  
  // 订单头部
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24rpx 30rpx;
    border-bottom: 1px solid $border;
    
    .order-basic {
      flex: 1;
      
      .order-no {
        margin-bottom: 8rpx;
        
        .label {
          font-size: 24rpx;
          color: $text-tertiary;
        }
        
        .value {
          font-size: 24rpx;
          color: $text-secondary;
          margin-left: 6rpx;
        }
      }
      
      .order-date {
        font-size: 22rpx;
        color: $text-tertiary;
      }
    }
    
    .order-tag {
      padding: 6rpx 16rpx;
      background-color: $primary-light;
      color: $primary;
      border-radius: 20rpx;
      font-size: 22rpx;
      font-weight: 500;
    }
    
    .used-tag {
      background-color: rgba(0, 180, 42, 0.1);
      color: $success;
    }
  }
  
  // 商品信息
  .product-info {
    display: flex;
    padding: 24rpx 30rpx;
    border-bottom: 1px solid $border;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: $bg;
    }
    
    .product-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      overflow: hidden;
      margin-right: 24rpx;
      flex-shrink: 0;
      
      .drone-img {
        width: 100%;
        height: 100%;
      }
    }
    
    .product-details {
      flex: 1;
      min-width: 0;
      
      .product-name {
        font-size: 28rpx;
        font-weight: 600;
        color: $text-primary;
        margin-bottom: 12rpx;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .product-spec {
        font-size: 24rpx;
        color: $text-secondary;
        margin-bottom: 12rpx;
        display: flex;
        gap: 10rpx;
        
        .separator {
          color: $border;
        }
      }
      
      .product-accessories {
        font-size: 24rpx;
        margin-bottom: 12rpx;
        
        .accessory-label {
          color: $text-tertiary;
        }
        
        .accessory-list {
          color: $text-secondary;
        }
      }
      
      .product-warranty {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        
        .warranty-icon {
          margin-right: 8rpx;
          font-size: 26rpx;
        }
        
        .warranty-text {
          color: $primary;
        }
      }
    }
    
    .product-price {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      
      .price-text {
        font-size: 28rpx;
        font-weight: 600;
        color: $danger;
        margin-bottom: 6rpx;
      }
      
      .quantity {
        font-size: 24rpx;
        color: $text-tertiary;
      }
    }
  }
  
  // 订单状态与进度
  .order-status {
    padding: 20rpx 30rpx;
    border-bottom: 1px solid $border;
    
    .status-text {
      font-size: 26rpx;
      font-weight: 500;
      margin-bottom: 20rpx;
      display: inline-block;
    }
    
    .status-pending-pay {
      color: $danger;
    }
    
    .status-pending-ship {
      color: $warning;
    }
    
    .status-shipping {
      color: $primary;
    }
    
    .status-pending-verify {
      color: $pending;
    }
    
    .status-completed {
      color: $success;
    }
    
    .status-cancelled {
      color: $text-tertiary;
    }
    
    .status-progress {
      padding: 10rpx 0;
      
      .progress-bar {
        height: 8rpx;
        background-color: $border;
        border-radius: 4rpx;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          background-color: $primary;
          transition: width 0.5s ease;
        }
      }
      
      .progress-steps {
        display: flex;
        justify-content: space-between;
        margin-top: 16rpx;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: 14rpx;
          left: 0;
          width: 100%;
          height: 2rpx;
          background-color: $border;
          z-index: 1;
        }
        
        .step {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          z-index: 2;
          
          .step-dot {
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            background-color: $card;
            border: 2rpx solid $border;
            margin-bottom: 8rpx;
          }
          
          .step-text {
            font-size: 20rpx;
            color: $text-tertiary;
          }
          
          &.completed {
            .step-dot {
              background-color: $primary;
              border-color: $primary;
            }
            
            .step-text {
              color: $primary;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
  
  // 订单金额
  .order-amount {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx;
    border-bottom: 1px solid $border;
    
    .amount-label {
      font-size: 26rpx;
      color: $text-secondary;
      margin-right: 10rpx;
    }
    
    .amount-value {
      font-size: 30rpx;
      font-weight: 600;
      color: $danger;
    }
  }
  
  // 操作按钮
  .order-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16rpx;
    padding: 20rpx 30rpx;
    
    .action-btn {
      height: 64rpx;
      line-height: 64rpx;
      padding: 0 28rpx;
      border-radius: 12rpx;
      font-size: 26rpx;
      transition: all 0.2s;
    }
    
    .secondary-btn {
      background-color: $bg;
      color: $text-secondary;
      border: 1px solid $border;
      
      &:hover {
        background-color: #E8E8E8;
      }
    }
    
    .primary-btn {
      background-color: $primary;
      color: white;
      border: 1px solid $primary;
      
      &:hover {
        background-color: #0E42D2;
      }
    }
    
    .text-btn {
      background-color: transparent;
      color: $primary;
      border: 1px solid transparent;
      
      &:hover {
        background-color: $primary-light;
      }
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 180rpx 0 100rpx;
  text-align: center;
  
  .empty-icon {
    font-size: 160rpx;
    color: $text-tertiary;
    margin-bottom: 40rpx;
    opacity: 0.6;
  }
  
  .empty-text {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-secondary;
    margin-bottom: 16rpx;
  }
  
  .empty-desc {
    font-size: 26rpx;
    color: $text-tertiary;
    margin-bottom: 50rpx;
    max-width: 500rpx;
    line-height: 1.6;
  }
  
  .shop-btn {
    width: 340rpx;
    height: 90rpx;
    line-height: 90rpx;
    background-color: $primary;
    color: white;
    border: none;
    border-radius: 45rpx;
    font-size: 30rpx;
    font-weight: 500;
    box-shadow: 0 6rpx 16rpx rgba(22, 93, 255, 0.25);
    transition: all 0.2s;
    
    &:hover {
      background-color: #0E42D2;
      transform: translateY(-2rpx);
    }
  }
}

// 搜索弹窗
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.search-content {
  position: absolute;
  top: var(--status-bar-height);
  left: 0;
  width: 100%;
  background-color: $card;
  border-radius: 0 0 30rpx 30rpx;
  padding-bottom: 30rpx;
  animation: slideDown 0.3s forwards;
  
  .search-box {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid $border;
    
    .search-icon {
      font-size: 30rpx;
      color: $text-tertiary;
      margin-right: 16rpx;
    }
    
    .search-input {
      flex: 1;
      height: 60rpx;
      font-size: 28rpx;
      color: $text-primary;
      padding: 0;
      margin: 0;
    }
    
    .cancel-icon {
      font-size: 28rpx;
      color: $text-secondary;
      margin-left: 20rpx;
      padding: 10rpx 0;
    }
  }
  
  .search-history {
    padding: 30rpx;
    
    .history-title {
      font-size: 26rpx;
      color: $text-tertiary;
      margin-bottom: 20rpx;
    }
    
    .history-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      margin-bottom: 30rpx;
    }
    
    .history-tag {
      padding: 14rpx 24rpx;
      background-color: $bg;
      border-radius: 30rpx;
      font-size: 26rpx;
      color: $text-secondary;
      display: flex;
      align-items: center;
      
      .delete-history {
        margin-left: 10rpx;
        color: $text-tertiary;
        font-size: 24rpx;
        width: 24rpx;
        height: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:active {
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 50%;
        }
      }
    }
    
    .clear-history {
      font-size: 26rpx;
      color: $text-tertiary;
      text-align: center;
      padding: 10rpx 0;
      
      &:active {
        background-color: $bg;
        border-radius: 10rpx;
      }
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
</style>
    